<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Login</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="./defaultf.css" rel="stylesheet" type="text/css" media="all" />
	<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link href="./css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <style>
    	.alert-danger {
			background-image: -webkit-gradient(linear,left 0,left 100%,from(#f2dede),to(#e7c3c3));
			background-image: -webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
			background-image: -moz-linear-gradient(top,#f2dede 0,#e7c3c3 100%);
			background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);
			background-repeat: repeat-x;
			border-color: #dca7a7;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede',endColorstr='#ffe7c3c3',GradientType=0);
		}
		.alert-danger {
			color: rgb(185, 74, 72);
			background-color: rgb(242, 222, 222);
			border-color: rgb(235, 204, 209);
		}
		#username,#password{
			width:161px;
		}
    </style>	
</head>

<body>
	<div id="wrap">
		<div id="header-wrapper">
			<div id="header" class="container">
				<div id="logo">
					<img src="./images/eldercare.gif" alt="" title="" border="0" width="270" height="70"/>
				</div>
				</p>
			<br/>
			<br/>
			</div>
		</div>
	</div>
	<div id="menu-wrapper">
		<div id="menu">
			<ul>
				<li class="current_page_item" ><a href="#" accesskey="1" title="">Login</a></li>
			</ul>
		</div>
		</div>

	<div id="wrap-content" style="margin:0px auto 0px auto; padding: 10px">
		<form action="./LoginController/LoginProcess.php" method="post" name="formLogin" id="loginForm" style="margin:0px auto 0px auto;">
			<fieldset>
				<p></p>
				<p></p>
				<table align="center">
					<tr>
						<td><font color="black">Username:</font></td>
						<td colspan="2"><input id="username" data-validation="required" type="text" name="username" size="20" maxlength="40"/></td>
					</tr>
					<tr>
						<td><font color="black">Password:</font></td>
						<td><input id="password" data-validation="required" type="password" name="password" size="20" maxlength="40"/></td>
						<td><a href="ResetPwd.php">Forgot Password?</a></td>
					</tr>
					<tr>
						<td height="10"></td>
					</tr>
					<tr>
						<td></td>
						<!--<td colspan="2"><input type="checkbox" value ="yes" name="Keep" style="height:16px"/><font color="black">&nbsp;Keep me logged in</font></td>-->
					</tr>
					<tr>
						<td></td>
						<td colspan="1" align="middle"><input type="submit" value="Login" button class="btn"/></td>
					</tr>
					<tr>
						<td colspan="3">
						<?php
							if(!empty($_GET['errno'])){
								$errno=$_GET['errno'];
								//Wrong username/password
								if($errno==1){
									echo "<p style='text-align:center'><font text-align='center' color='red' size='3'>Wrong username/password.</font></p>";
								}
								if($errno==2){
									echo "<p style='text-align:center'><font text-align='center' color='red' size='3'>Invalid Username.</font></p>";
								}
								if($errno==3){
									echo "<p style='text-align:center'><font text-align='center' color='red' size='3'>Invalid Password.</font></p>";
								}
							}
						?>
						</td>
					</tr>
				</table>
			</fieldset>
		</form>
	</div>
</body>
<!-- validation -->
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery.form-validator.min.js" type="text/javascript"></script>
	<script>
	$.validate({
	    form: '#loginForm',
	    validateOnBlur: false, // disable validation when input looses focus
	    errorMessagePosition: 'top', // Instead of 'element' which is default
	    scrollToTopOnError: false, // Set this property to true if you have a long form
	});
</script>
</html>
